﻿<html debug="true" xmlns="http://www.w3.org/1999/xhtml"><!-- debug -->
	<head>
		<title>Repetition Events</title>
		<meta name="keywords" content="repetition" />
		<meta name="description" content="Demonstrating the handling of added, removed, and moved events" />
		<script type="text/javascript" src="../../webforms2_src.js"></script>
		<script type="text/javascript" src="../firebug/firebug.js"></script>
		
		<!-- BEGIN HEAD -->
		<script type="text/javascript">
		
		var colors = [
			'rgb(255, 255, 255)',
			'rgb(255, 204, 204)',
			'rgb(255, 204, 153)',
			'rgb(255, 255, 153)',
			'rgb(255, 255, 204)',
			'rgb(153, 255, 153)',
			'rgb(153, 255, 255)',
			'rgb(204, 255, 255)',
			'rgb(204, 204, 255)',
			'rgb(255, 204, 255)',
			'rgb(204, 204, 204)'
		];
		window.onload = function(){
			var dom2EventModel = document.getElementById('dom2EventModel');
			var oldEventModel = document.getElementById('oldEventModel');
		
			try {
				if(document.addEventListener && document.createEvent('UIEvents')){
					toggleDOM2Events(dom2EventModel.checked);
				}
				else throw Error();
			}
			catch(err){
				dom2EventModel.checked = false;
				dom2EventModel.disabled = true;
				dom2EventModel.parentNode.className = 'disabled';
				oldEventModel.checked = true;	
			}
			toggleTraditionalEvents(oldEventModel.checked);
		}
		
		var count = 0;
		var doStrip = true;
		function addEventLogEntry(type, element, model){
			document.getElementById('doNote').style.display='none';
		
			count++;
			var tbody = document.getElementById('eventLog');
			var row = document.createElement('tr');
			var cell;
			
			cell = document.createElement('th');
			cell.appendChild(document.createTextNode(count));
			row.appendChild(cell);
			
			cell = document.createElement('td');
			cell.appendChild(document.createTextNode(type));
			cell.className = 'type';
			row.appendChild(cell);
			
			cell = document.createElement('td');
			cell.appendChild(document.createTextNode(element));
			row.appendChild(cell);
			
			cell = document.createElement('td');
			cell.appendChild(document.createTextNode(model));
			row.appendChild(cell);
			
			if(!element.style || !element.style.backgroundColor)
				element.style.backgroundColor = colors[count % colors.length];
			row.style.backgroundColor = element.style.backgroundColor;
			
			tbody.insertBefore(row, tbody.firstChild);
		}
		
		function handle_DOM2Event(event){
			addEventLogEntry(event.type, event.element || event.relatedNode, 'DOM Level 2');
		}
		function handle_traditionalEvent(event){
			addEventLogEntry(event.type, event.element || event.relatedNode, 'traditional');
		}

		function toggleDOM2Events(toggle){
			if(toggle){
				document.addEventListener('added', handle_DOM2Event, false);
				document.addEventListener('removed', handle_DOM2Event, false);
				document.addEventListener('moved', handle_DOM2Event, false);
			}
			else {
				document.removeEventListener('added', handle_DOM2Event, false);
				document.removeEventListener('removed', handle_DOM2Event, false);
				document.removeEventListener('moved', handle_DOM2Event, false);
			}
		}
		function toggleTraditionalEvents(toggle){
			if(toggle){
				var rt = document.getElementById('i');
				rt.onadded = handle_traditionalEvent;
				rt.onremoved = handle_traditionalEvent;
				rt.onmoved = handle_traditionalEvent;
			}
			else {
				var rt = document.getElementById('i');
				rt.onadded = null;
				rt.onremoved = null;
				rt.onmoved = null;
			}
		}
		
		</script>
		<style type="text/css">
			ul {
				width:60ex;
			}
			li {
				margin-top:.3em;
				margin-bottom:.3em;
				padding-left:1ex;
				padding-top:.1em;
				padding-bottom:.1em;
				padding-right:.1em;
			}
			td,th {
				padding-left:1ex;
				padding-right:1ex;
				font-size:9pt;
			}
			fieldset#eventLogBox {
				width:50ex;
			}
			fieldset#eventLogBox div {
				text-align:center;
			}
			fieldset#eventLogBox table{
				width:100%;
			}
			td.type {
				font-size:larger;
				font-weight:bold;
			}
			.disabled label {
				text-decoration:line-through;
			}
			.error {
				display:none;
			}
			.disabled .error {
				color:red;
				display:inline;
			}
		</style>
		<!-- END HEAD -->
	</head>
	<body>
		<div id="testcaseDesc">
			<p>The following demonstrates the handling of repetition events, using both the DOM Level 2 event model and the traditional event model; the MSIE's proprietary event model is not demonstrated.</p>
		</div>
		
		<!-- BEGIN TEST CASE -->
		
		<form>
			<fieldset style="display:inline;">
				<legend><strong>Event model options</strong></legend>
				<div><input type="checkbox" id="dom2EventModel" onclick="toggleDOM2Events(this.checked)" checked="checked" />
				<label for="dom2EventModel">Use DOM Level 2 event model</label>
				<span class="error">Unsupported by this browser</span>
				</div>
				<div><input type="checkbox" id="oldEventModel" onclick="toggleTraditionalEvents(this.checked)" />
				<label for="oldEventModel">Use traditional event model</label> (extension provided by <a href="http://code.google.com/p/webforms2/">implementation</a>)</div>
			</fieldset>
			
			<p><button type="add" template="i" style="font-size:large">Add row</button></p>
			<ul>
				<li id="i" repeat="template" repeat-start="0">
					<input type="text" id="text[i]" value="Index [i]" />
					<button type="move-down">&#x2193;</button><button type="move-up">&#x2191;</button>
					<button type="remove">Remove</button>
				</li>
			</ul>
		</form>
		<br />
		
		<fieldset id="eventLogBox">
			<legend><strong>Event Log</strong></legend>
			<table cellspacing="0" cellpadding="5">
				<thead>
					<tr>
						<th>#</th>
						<th>Type</th>
						<th>Element</th>
						<th>Model</th>
					</tr>
				</thead>
				<tbody id="eventLog"></tbody>
			</table>
			<div id="doNote"><em>(Click the <code>add</code> button above to fire events)</em></div>
		</fieldset>
		
		<!-- END TEST CASE -->
	</body>
</html>